import React from "react";
import { Modal, Checkbox, Select } from "antd";
import { observer, inject } from "mobx-react";
import "./style.scss";

const { Option } = Select;

@inject("SubjectStore")
@observer
class Share extends React.Component {
    onChange = e => {
        this.props.SubjectStore.getSubjectAppList(e);
        this.props.SubjectStore.selectCurItemId(e);
    };

    addUsers = item => {
        this.props.SubjectStore.selectUser(item);
    };

    sureShare = () => {
        this.props.SubjectStore.sendShare();
        this.props.onCancel();
    };

    componentDidMount() {
        this.props.SubjectStore.getSubjectAppList();
    }

    render() {
        const {
            SubjectStore: { resultData, subjectChildList, selectedUsers, curItem, curItemId }
        } = this.props;
        const count = subjectChildList.filter(item => item.checked).length;
        console.log("selectedUsers", selectedUsers);
        return (
            <Modal visible title="协同分享" onOk={this.sureShare} onCancel={() => this.props.onCancel()}>
                <div className="share-container">
                    <div className="share-header">
                        <span className="header-name">专题</span>
                        <Select className="header-sel" value={curItemId || curItem.id} onChange={e => this.onChange(e)}>
                            {resultData &&
                                resultData.map(item => (
                                    <Option key={`opt-row-${item.id}`} value={item.id}>
                                        {item.name}
                                    </Option>
                                ))}
                        </Select>
                        <span>已分享给{count}名用户</span>
                    </div>
                    <div className="share-content">
                        {subjectChildList &&
                            subjectChildList.map(item => (
                                <div key={`div-${item.id}`} className="share-check">
                                    <Checkbox
                                        checked={selectedUsers.includes(item.id)}
                                        onClick={() => this.addUsers(item.id)}
                                    >
                                        {item.name}
                                    </Checkbox>
                                </div>
                            ))}
                    </div>
                    <div className="share-footer">
                        <span>提示：</span>
                        分享专题到指定用户后，该用户专题模块可查看操作当前专题内容。
                    </div>
                </div>
            </Modal>
        );
    }
}

export default Share;
